<template>

  <div id="echart-wrapper"></div>

</template>

<script>
    /**
     * 统计报表
     * @author Canaan
     * @date 2019/8/10 18:25.
     */
    import moment from 'moment';
    export default {
        name: 'storeReportTabIntoInventory',
        mounted() {
            this.getHeight();
            this.getEchartData().then(() => {
                this.renderEchart();
            })

        },
        components: {},
        props: {},
        data() {
            return {
                //报表图例title
                echartLegendData: [],
                //报表图例的数据
                echartSeriesData: [],
                customParams: {
                    pageNo: 1,
                    limit: 6,
                    storeId: 0,
                    categoryId: undefined,
                    startTime: moment().subtract(7, 'days').valueOf(),
                    endTime: moment().valueOf()
                },
            }
        },
        computed: {},
        methods: {
            getHeight() {
                //获取手机高度
                const clientH = document.body.clientHeight;
                let salt = 0;
                if (clientH <= 568) {
                    salt = 7;
                } else if (clientH <= 667) {
                    salt = 25;
                } else if (clientH <= 736) {
                    salt = 40;
                }else if (clientH <= 812) {
                    salt = 55;
                }  else if (clientH <= 1024) {
                    salt = 62;
                }
                document.getElementById("echart-wrapper").style.height = (clientH * 0.3 +salt) + 'px';
            },
            //获取图表的数据
            getEchartData() {
                return this.$ajax.get("report/inventory/inventory_report", {
                    params: this.customParams
                }).then(res => {
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                    } else {
                        for (let i = 0; i < res.data.inventoryReportStats.length; i++) {
                            const item = {
                                name: res.data.inventoryReportStats[i].materialName,
                                value: res.data.inventoryReportStats[i].auditQuantity,
                                trace: res.data.inventoryReportStats[i].traceQuantity
                            };
                            this.echartSeriesData.push(item);
                            this.echartLegendData.push(res.data.inventoryReportStats[i].materialName);
                        }
                    }
                })
            },
            //渲染图表
            renderEchart() {
                const myChart = this.$echarts.init(document.getElementById('echart-wrapper'));
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                    },
                    legend: {

                        type: "plain",
                        orient: 'vertical',
                        right: '1%',
                        top: '15%',
                        icon: "circle",
                        data: this.echartLegendData,
                        formatter: function (name) {
                            let index = 0;
                            const clientlabels = option.legend.data;
                            clientlabels.forEach(function (value, i) {
                                if (value === name) {
                                    index = i;
                                }
                            });
                            let clientcounts = [];
                            for (var i = 0; i < option.series[0].data.length; i++) {
                                clientcounts.push(option.series[0].data[i].value + option.series[0].data[i].trace)
                            }
                            //总值
                            const total = clientcounts.reduce(function (prev, curr) {
                                return prev + curr;
                            });
                            if (total === 0) {
                                return name + " " + "0.00% " + clientcounts[index];
                            } else {
                                return name + " " + ((clientcounts[index] / total) * 100).toFixed(2) + "% " + clientcounts[index];
                            }
                        }
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        center: ['30%', '50%'],
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: this.echartSeriesData
                    }]
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            }
        },
        watch: {},
        filters: {},
        beforeDestroy() {
        }
    }

</script>

<style scoped>
  #echart-wrapper {
    background: #fff !important;
    width: 100%;

  }

</style>
